import React, { useRef, useEffect, memo, useState } from 'react';
import { Row, Col, Input, Button, Table } from 'antd';
import styles from './index.less';
import useModel from '../../useModel.js';
import classnames from 'classnames';
import { useAntdTable } from '@umijs/hooks';
import moment from 'moment';
import ErrorMessage from './errorMessage';

const DictionnaryTable = () => {
  const { run, state, setState } = useModel(model => [model.tableParams, model.state]);
  let row = localStorage.getItem('deviceType');
  const { tableParams } = state;
  const { tableProps, refresh } = useAntdTable(
    ({ current, pageSize, gender }) =>
      run({
        currentPage: current,
        ...tableParams,
        pageSize: pageSize,
        fsuTypeId: row && JSON.parse(row)?.id,
      }).then(res => ({
        total: res?.data?.totalCount || 0,
        data: res?.data?.dataList || [],
      })),
    {
      defaultPageSize: 10,
    },
  );
  useEffect(() => {
    refresh();
  }, [tableParams]);

  const columns = [
    {
      title: 'FSUID',
      align: 'center',
      dataIndex: 'suId',
      render: text => {
        return <span>{text ? text : '-'}</span>;
      },
    },
    {
      title: '报文名称',
      align: 'center',
      dataIndex: 'title',
      render: text => {
        return <span>{text ? text : '-'}</span>;
      },
    },
    {
      title: '请求时间',
      align: 'center',
      dataIndex: 'requestTime',
      render: text => {
        return <span>{text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : '-'}</span>;
      },
    },
    {
      title: '响应时间',
      align: 'center',
      dataIndex: 'responseTime',
      render: text => {
        return <span>{text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : '-'}</span>;
      },
    },
    {
      title: '报文结果',
      align: 'center',
      dataIndex: 'result',
      render: text => {
        return <span>{text === 1 ? '成功' : '失败'}</span>;
      },
    },
    {
      title: '失败报文',
      align: 'center',
      dataIndex: 'description',
      ellipsis: true,
      className: styles[''],
      render: (_, record) => {
        return (
          <>
            {record.description ? (
              <span
                onClick={() => {
                  setState({ messageDetailVisible: true, messageDetailItem: record });
                }}
              >
                {record.description.xml}
              </span>
            ) : (
              <span>{'-'}</span>
            )}
          </>
        );
      },
    },
  ];
  return (
    <>
      <Table
        className={classnames(styles['table-wrap'], styles['alarm-height'])}
        columns={columns}
        rowKey={(item, index) => {
          return index.toString(36) + index;
        }}
        {...tableProps}
        pagination={{ ...tableProps.pagination, showQuickJumper: true, showSizeChanger: true }}
      />
      <ErrorMessage />
    </>
  );
};
export default DictionnaryTable;
